import 'package:flutter/material.dart';
import 'package:flutter_douban/model/Subject.dart';
import 'package:flutter_douban/router.dart';

var _tabs = ['动态', '推荐'];

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: _getWidget(),
    );
  }

  DefaultTabController _getWidget() {
    return DefaultTabController(
      length: _tabs.length,
      initialIndex: 1,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                pinned: true,
                expandedHeight: 120.0,
                primary: true,
                titleSpacing: 0.0,
                backgroundColor: Colors.white,
                flexibleSpace: FlexibleSpaceBar(
                  collapseMode: CollapseMode.pin,
                  background: Container(
                    color: Colors.green,
                    child: SearchTextFieldWidget(
                      hintText: '影视作品中你难忘的离别',
                      margin: const EdgeInsets.only(left: 15.0, right: 15.0),
                      onTap: () => Router.push(context, Router.searchPage,
                          params: '影视作品中你难忘的离别'),
                    ),
                    alignment: Alignment(0.0, 0.0),
                  ),
                ),
                bottom: TabBar(
                  tabs: _tabs
                      .map((String text) => Container(
                            child: Text(text),
                            padding: const EdgeInsets.only(bottom: 5.0),
                          ))
                      .toList(),
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          children: _tabs
              .map((e) => SliverContainer(
                    name: e,
                  ))
              .toList(),
        ),
      ),
    );
  }
}

class SliverContainer extends StatefulWidget {
  final String name;

  SliverContainer({Key key, this.name}) : super(key: key);

  @override
  _SliverContainerState createState() => _SliverContainerState();
}

class _SliverContainerState extends State<SliverContainer> {
  List<Subject> list;
  @override
  void initState() {
    super.initState();
    if (list == null || list.isEmpty) {
      if (_tabs[0] == widget.name) {
        requestApi();
      } else {
        requestApi();
      }
    }
  }

  void requestApi() async {}

  @override
  Widget build(BuildContext context) {
    return getContentSliver(context, list);
  }

  getContentSliver(BuildContext context, List<Subject> list) {
    if (list == null || list.length == 0) {
      return Text('暂无数据');
    }
    return SafeArea(
        top: false,
        bottom: false,
        child: Builder(builder: (BuildContext context) {
          return CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: <Widget>[
              SliverOverlapInjector(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
              SliverList(delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                return getCommonItem(list, index);
              }))
            ],
          );
        }));
  }

  getCommonItem(List<Subject> list, int index) {
    Subject item = list[index];
    bool showVideo = index == 1 || index == 3;
    return Container(
      height: showVideo ? 350: 180,
      color: Colors.white,
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.fromLTRB(13, 13, 13, 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          
        ],
      ),
    );
  }
}

class SearchTextFieldWidget extends StatelessWidget {
  final ValueChanged<String> onSubmitted;
  final VoidCallback onTap;
  final String hintText;
  final EdgeInsetsGeometry margin;

  const SearchTextFieldWidget(
      {Key key, this.onSubmitted, this.onTap, this.hintText, this.margin})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin == null ? EdgeInsets.all(0.0) : margin,
      width: MediaQuery.of(context).size.width,
      alignment: AlignmentDirectional.center,
      height: 38.0,
      decoration: BoxDecoration(
        color: Color.fromARGB(255, 237, 236, 237),
        borderRadius: BorderRadius.circular(24.0),
      ),
      child: TextField(
        onSubmitted: onSubmitted,
        onTap: onTap,
        cursorColor: Color.fromARGB(255, 0, 189, 96),
        // textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.only(top: 3.0),
          border: InputBorder.none,
          hintText: hintText,
          hintStyle: TextStyle(
              fontSize: 17, color: Color.fromARGB(255, 192, 191, 191)),
          prefixIcon: Icon(
            Icons.search,
            size: 25,
            color: Color.fromARGB(255, 128, 128, 128),
          ),
        ),
        style: TextStyle(fontSize: 17),
      ),
    );
  }
}
